<template>
    <div class="woo-description">
        <h1>Connect your store and start selling on WooCommerce</h1>
        <h2>
            <figure>
                <img src="https://img.podpartner.com/static/images-20230202/woo-description-banner.png" />
            </figure>
        </h2>

        <h3>Connect your store and start selling on WooCommerce</h3>
        <p>
            1. Click the <em>"Connect to WooCommerce"</em> button below to enter the
            WooCommerce platform <br />
            <button @click="linkToStore()">Connect to WooCommerce</button>
        </p>
        <cite>
            <p>2. Enter your WooCommerce store URL</p>
            <img src="https://img.podpartner.com/static/images-20230202/woo-description-content-1.png" />
        </cite>
        <cite>
            <p>3. You need to log in to your WooCommerce account first. After that, Click on <em>"Approve"</em> to proceed with the integration.</p>
            <img src="https://img.podpartner.com/static/images-20230202/woo-description-content-2.png" />
        </cite>

        <h4>
            That's it. You're done! Now you can add products to your WooCommerce store.
        </h4>
        <UxDialog :visible="dialog.show" title="" @close="dialog.show = false">

            <!-- <div class="store-link" v-else-if="/shopify|etsy|pod/.test(dialog)">
                <div class="store-link-wating" v-if="link_loading == 'waiting'">
                    <p>Have you bound the argument? Please refresh the page</p>
                    <button @click="refresh()">Refresh</button>
                </div>
            </div> -->

            <div class="store-link" v-loading="dialog.loading" v-if="dialog">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/shop-icon-woo.png" alt="">
                </figure>
                <h2>WooCommerce</h2>
                <p>Please enter your WooCommerce store URL</p>

                <!-- <el-input size="small" v-model="dialog.name" placeholder="shop name" v-if="dialog == 'shopify'">
                    <template slot="prepend">http://</template>
                    <template slot="append">.myshopify.com</template>
                </el-input> -->
                <label>
                    <input v-model="dialog.name" placeholder="https://www.example.com" />
                    <i class="iconfont icon-xiangqing2" v-show="dialog.error" v-text="dialog.error"></i>
                </label>

                <button type="primary" @click="dialog.callback()">Connect</button>
            </div>
        </UxDialog>
    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    name: "WooDescription",
    layout: "default",
    data () {
        return {
            dialog: {
                show: false,
                name: '',
                error: false,
                loading: null,
                callback: null,
            },
        };
    },
    computed: {
        ...mapGetters({
            logined: "getIsLogin",
        }),
    },
    methods: {
        async getLink () {
            this.dialog.show = true;
            this.dialog.name = '';
            this.dialog.loading = false;
            this.dialog.error = '';
            this.dialog.callback = async () => {
                if (this.dialog.loading) {
                    // 加载中
                } else if (!this.dialog.name) {
                    this.dialog.error = "Please fill in your WooCommerce store URL";
                    this.$uxMessage.error(this.dialog.error);
                } else if (!/https?\:\/\//.test(this.dialog.name)) {
                    this.dialog.error = "This is not a valid WooCommerce store URL";
                    this.$uxMessage.error(this.dialog.error);

                } else {

                    let opener = window.open("about:blank");
                    this.dialog.loading = true
                    let request = { domain: this.dialog.name }
                    let response = await this.$http('AppStore.getWooBind', request);

                    if (response.code === 0) {
                        this.dialog.loading = false
                        opener && (opener.location = response.data.url);
                    } else {
                        this.dialog.loading = false
                        this.$uxMessage.error(response.msg || "get connect url failure");
                        opener && opener.close();
                    }
                }
            }
        },

        linkToStore () {
            if (this.logined) {
                this.getLink();
            } else {
                this.$emit("global:userLogin", (e) => {
                    this.getLink()
                    // 登录完成
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.dialog-layout::v-deep {
    .dialog-content {
        > h2 {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            &::before {
                display: none;
            }
        }
    }
}

.woo-description {
    font-family: Roboto, Roboto;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 72px;
    padding-bottom: 140px;

    h1 {
        text-align: center;
        font-size: 36px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 46px;
    }

    h2 {
        margin-top: 32px;
        position: relative;
        figure {
            position: relative;
            overflow: hidden;
        }
        img {
            width: 100%;
        }
    }

    h3 {
        font-size: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 32px;
        margin-top: 36px;
    }

    p {
        margin-top: 18px;
        font-size: 16px;

        color: #555555;
        line-height: 30px;

        & > button {
            display: block;
            margin: 10px 0 18px;
            padding: 0 18px;
            // width: 140px;
            height: 38px;
            background: #ea4c89;
            border-radius: 6px;
            font-size: 14px;

            font-weight: normal;
            color: #ffffff;
            border: none;

            &:hover {
                background-color: #c94175;
            }
        }

        em {
            color: #000;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
        }
    }

    cite {
        margin-top: 32px;
        & > p {
            margin: 0 0 11px 0;
        }
        img {
            // width: 100%;
            // max-width: 80%;
        }
    }

    h4 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 32px;
        margin-top: 38px;
    }

    h6 {
        position: relative;
        margin-top: 38px;
        max-width: 850px;
        background: #f9f3e0;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 24px 28px 24px 52px;
        font-weight: normal;
        font-size: 16px;

        color: #000000;
        line-height: 22px;

        i {
            left: 28px;
            top: 24px;
            width: 24px;
            height: 24px;
            color: #e4b23d;
            position: absolute;
        }
    }
}

.store-link {
    width: 520px;
    padding: 60px;
    box-sizing: border-box;

    figure {
        width: 64px;
        height: 64px;
        margin: 0 auto;
        svg,
        img {
            width: 64px;
            height: 64px;
        }
    }
    h2 {
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
        margin-top: 10px;
        text-align: center;
    }
    p {
        margin-top: 42px;
        font-size: 14px;
        color: #555555;
        line-height: 16px;
        font-weight: bold;
    }
    label {
        display: block;
        margin-top: 10px;
        position: relative;

        i {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 10px;
            font-size: 14px;
            color: #f44336;
            line-height: 16px;

            &::before {
                margin-right: 4px;
            }
        }
    }
    button {
        margin-top: 84px;
        width: 100%;
        height: 40px;
        font-weight: bold;
    }

    .store-link-wating {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
            margin-top: 80px;
            font-size: 14px;

            color: #666666;
            line-height: 16px;
            text-align: center;
        }
        button {
            margin-top: 40px;
            width: 100%;
            max-width: 120px;
            box-sizing: border-box;
            height: 40px;
            background: #ffffff;
            border-radius: 6px;
            border: 1px solid #d9d9d9;
            font-size: 14px;

            font-weight: normal;
            color: #000000;
        }
    }
}

@media (max-width: 960px) {
    .woo-description {
        max-width: 500px;
        box-sizing: border-box;
        padding: 18px 14px 32px;
        h1 {
            width: calc(100% - 40px);
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
        }
        h2 {
            margin-top: 14px;
            button {
                display: none;
            }
        }
        h3 {
            margin-top: 16px;
        }
        p {
            &:nth-child(4) {
                margin-top: 6px;
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
                em {
                    font-size: 15px;
                    font-weight: 400;
                    color: #000;
                }
                button {
                    margin: 14px 0 16px;
                }
            }
        }
        cite {
            margin-top: 24px;
            p {
                font-size: 14px;
            }
        }
        img {
            width: 100%;
        }
        h4 {
            margin-top: 24px;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 18px;
        }
        h6 {
            margin-top: 24px;
            padding: 14px 12px 14px 36px;
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            line-height: 20px;
            i {
                left: 14px;
                top: 16px;
                width: 16px;
                height: 16px;
                font-size: 16px;
                line-height: 16px;
            }
        }
    }
}
</style>
